import { Carousel } from 'antd';
import "./index.less";
import { BannerInfo } from '@/types'

interface BannerProps{
  data: BannerInfo[]
}

const Banner = (props: BannerProps) => {
  const { data }=props;
  return (<div className="banner-wrapper">
    <Carousel autoplay autoplaySpeed={3000}>  
      {/* autoplaySpeed 调整轮播速度 */}
        {data.map(item => (<div className="banner" key={item.id}>
        <h3 style={{backgroundImage:`url(${item.img})`}}>
          <video width='100%' muted src={item.video} autoPlay loop></video>
          <div className="desc">
            <div>{item.title}</div>
            <p>{item.desc}</p>
          </div>
        </h3>
      </div>))}
    </Carousel>
  </div>);
}

export default Banner;
